<template>
	<view>
		<u-navbar title="站点信息" bgColor="#F4F7F8"></u-navbar>
		<!-- #ifndef MP-WEIXIN -->
		<!-- 	<u--image :showLoading="true" :src="src" width="686rpx" height="272rpx" mode="widthFix" style="margin: 0 32rpx"
			radius="20rpx"></u--image> -->
		<view class="" style="padding: 0 32rpx;">
			<u-swiper :list="swiperlist" height="272rpx"></u-swiper>
		</view>
		<!-- @click="click" -->
		<view class="card">
			<view class="u-flex title">
				<view class="text">
					<view class="pcs u-line-1">{{ data.pcs }}</view>
					<view class="Address u-line-1">{{ data.Address }}</view>
					<view class="Address u-line-1">{{$z.$t("场地类型")}}:{{ data.StationTypexs }}</view>
				</view>
				<view class="jl u-flex" style="flex-direction: column" @click="SiteOftenfn">
					<view class="iconfont icon-shoucang scicon" :class="{ active: SiteOftenactive }"></view>
					<view class="jltext">{{$z.$t("收藏")}}</view>
				</view>
				<view class="jl u-flex" style="flex-direction: column" @click="dh">
					<u--image :showLoading="true" :src="srcjl" width="60rpx" height="60rpx" mode="widthFix"
						style="margin: 0 32rpx" radius="20rpx"></u--image>
					<view class="jltext">{{ jl }}</view>
				</view>
			</view>
			<view class="u-flex tds">
				<view class="u-flex item" @click="gostationggteltd('carzlsum')">
					<view class="zhi">{{$z.$t("快")}}</view>
					<view class="text">
						<view class="text1">
							<text class="zhixian">
								{{$z.$t("空闲")}}{{ data.carzlsum - data.carzlsumcd||"0" }}
							</text>
							/{{$z.$t("共")}}{{ data.carzlsum||"0" }}
						</view>
						<view class="text2">{{$z.$t("点击选择充电桩")}}</view>
					</view>
				</view>

				<u-line direction="col" length="60rpx" color="#000"></u-line>
				<view class="u-flex item" @click="gostationggteltd('carjlsum')">
					<view class="zhi jiao">{{$z.$t("慢")}}</view>
					<view class="text">
						<view class="text1">
							<text class="jiaoxian">
								{{$z.$t("空闲")}}{{ data.carjlsum - data.carjlsumcd||"0" }}
							</text>
							/{{$z.$t("共")}}{{ data.carjlsum||"0" }}
						</view>
						<view class="text2">{{$z.$t("点击选择充电桩")}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card" v-if="df">
			<view class="itemtitle">
				<view class="iconfont icon-jine"></view>
				{{$z.$t("收费规则")}}
			</view>
			<view class="dfjebox" v-if="typeof df == 'object'">
				<view class="u-flex u-flex-between" style="height: 44rpx">
					<view class="">{{$z.$t("当前计费时段")}} {{ df.t1 }}-{{ df.t2 }}</view>
					<view class="xq" @click="Stationxq()">{{$z.$t("查看详情")}}</view>
				</view>
				<view class="u-flex" style="font-size: 28rpx; height: 48rpx">
					<text class="dfje">{{ df.je3 }}</text>
					{{$z.$t("元/度")}}
				</view>
				<view class="u-flex" style="font-size: 28rpx; flex-wrap: wrap;line-height: 48rpx;">
					{{$z.$t("电费")}}
					：<text class="dfje">{{df.je1}}</text>{{$z.$t("元/度")}}；{{$z.$t("服务费")}}：<text
						class="dfje">{{df.je2}}</text>{{$z.$t("元/度")}}
				</view>
				<view style="margin-top: 10rpx;">{{$z.$t("当前费用仅供参考，具体费用请查看使用充电桩收费详情")}}</view>
			</view>
			<view class="dfjebox" v-else>
				<view class="u-flex u-flex-between" style="height: 44rpx">
					<view class="">{{$z.$t("当前计费时段")}} 00:00 -- 24:00</view>
					<view class="xq" @click="Stationxq()">{{$z.$t("查看详情")}}</view>
				</view>
				<view class="u-flex" style="font-size: 28rpx; height: 48rpx">
					<text class="dfje">{{ df }}</text>
					{{$z.$t("元/度")}}
				</view>
				<view style="margin-top: 10rpx;">{{$z.$t("当前费用仅供参考，具体费用请查看使用充电桩收费详情")}}</view>
			</view>

		</view>
		<view class="card" v-if="data.ParkFee" @click="ParkFeetap()">
			<view class="itemtitle">
				<view class="iconfont">P</view>
				{{$z.$t("停车场信息")}}
			</view>
			<view class="ParkFee">
				{{ data.ParkFee }}
			</view>
		</view>
		<!-- v-if="CdzfwfInfoSearch.stationid" -->
		<view class="card" v-if="CdzfwfInfoSearch.stationid">
			<view class="itemtitle">
				<view class="iconfont">服</view>
				{{$z.$t("服务方基本信息")}}
			</view>
			<view class="ParkFee u-line-1" style="color: #333;">
				{{$z.$t("服务提供方")}}：{{ CdzfwfInfoSearch.gsname }}
			</view>
			<!-- v-if="CdzfwfInfoSearch.shresult=='1'" -->
			<view class="ParkFee" v-if="CdzfwfInfoSearch.shresult=='1'">
				<!-- 	<u-button type="primary" text="营业执照" style="width: auto; margin: 0" size="mini"></u-button> -->
				<u-button type="primary" text="营业执照" size="mini" :custom-style="{display:'inline-flex',width:'auto'}"
					@click="showimg(CdzfwfInfoSearch.yyzzpic)"></u-button>
				<!-- <u-upload :disabled="true" :fileList="fileList" name="1" multiple :maxCount="10"></u-upload> -->
			</view>
			<view class="ParkFee u-line-1" style="color: #333;">
				{{$z.$t("营业时间")}}：{{ CdzfwfInfoSearch.sjyys }}-{{ CdzfwfInfoSearch.sjyye }}
			</view>
		</view>

		<fixedbtn>
			<u-button type="primary" @click="sys()" text="扫码充电"></u-button>
		</fixedbtn>
		<zmodal ref="zmodal"></zmodal>
		<u-modal :show="showBusinessLicense" :showConfirmButton='false'>
			<view>
				<view class="warm-reminder-title">{{$z.$t("温馨提示")}}</view>
				<view class="warm-reminder-ctn">
					{{$z.$t("证照信息来源于经营者自行申报和工商系统数据，具体以工商部门登记为准。经营者需要确保信息真实有效，平台将定期核查。如与实际不符，为避免违规，请联系当地工商部门或平台客服更新。")}}
				</view>
				<u--image @click="previewImg" :showLoading="true" :src="businessLicenseImg" mode='widthFix'
					width='100%'></u--image>
				<view class="business-license-close">
					<u-button @click="closeImg" type="primary" text="关闭"></u-button>
				</view>
			</view>
		</u-modal>
		<!-- #endif -->
	</view>
</template>

<script>
	import src from "@/static/banner2.png";
	import srcjl from "@/static/jl.png";
	import jwx from "@/common/jwx.js";
	export default {
		data() {
			return {
				src,
				srcjl,
				data: {},
				query: {},
				SiteOften: [],
				CdzfwfInfoSearch: {},
				CdzstationpicSearch: {},
				showBusinessLicense: false,
				businessLicenseImg: '',
			};
		},
		asyncComputed: {
			async df() {
				let query = this.query;
				let StationCar = this.data || {};
				let StationHD = await this.$store.dispatch("request/getRequest", {
					url: "/StationHD",
					data: {
						id: query.id,
					},
				});
				// console.log(StationCar, StationHD);
				if (StationHD.length == 0) {
					return "0";
				}
				if (StationHD[0].type == "1") {
					return Number(StationHD[0].df).div(100);
				}

				let dfarr1 = [
					[{
							label: this.$z.$t("尖峰"),
							value: "jdf",
						},
						{
							label: this.$z.$t("尖峰服务费"),
							value: "jfff",
						},
						["jsjsh", "jsjsm", "jsjeh", "jsjem"],
					],
					[{
							label: this.$z.$t("高峰"),
							value: "fdf",
						},
						{
							label: this.$z.$t("高峰服务费"),
							value: "ffff",
						},
						["fsjsh", "fsjsm", "fsjeh", "fsjem"],
					],
					[{
							label: this.$z.$t("平峰"),
							value: "pdf",
						},
						{
							label: this.$z.$t("平峰服务费"),
							value: "pfff",
						},
						["psjsh", "psjsm", "psjeh", "psjem"],
					],
					[{
							label: this.$z.$t("谷峰"),
							value: "gdf",
						},
						{
							label: this.$z.$t("谷峰服务费"),
							value: "gfff",
						},
						["gsjsh", "gsjsm", "gsjeh", "gsjem"],
					],
				];
				let times = [];
				// console.log(StationCar, "111");
				dfarr1.forEach((e) => {
					let je1 = StationCar[e[0].value] / 100;
					let je2 = StationCar[e[1].value] / 100;
					let je3 = Number(StationCar[e[0].value])
						.add(Number(StationCar[e[1].value]))
						.div(100);

					let dsstr = "";
					for (let i = 1; i <= 5; i++) {
						let t1 = StationCar[`${e[2][0]}${i}`];
						let t2 = StationCar[`${e[2][1]}${i}`];
						let t3 = StationCar[`${e[2][2]}${i}`];
						let t4 = StationCar[`${e[2][3]}${i}`];
						if (!t1) {
							t1 = "0";
						}
						if (!t2) {
							t2 = "0";
						}
						if (!t3) {
							t3 = "0";
						}
						if (!t4) {
							t4 = "0";
						}
						t1 = t1 < 10 ? "0" + t1 : t1;
						t2 = t2 < 10 ? "0" + t2 : t2;
						t3 = t3 < 10 ? "0" + t3 : t3;
						t4 = t4 < 10 ? "0" + t4 : t4;

						if (!(t1 == 0 && t2 == 0 && t3 == 0 && t4 == 0)) {
							dsstr = t1 + ":" + t2 + "--" + t3 + ":" + t4;
							times.push([
								...e,
								{
									t1: `${t1}:${t2}`,
									t2: `${t3}:${t4}`,
									je1,
									je2,
									je3,
								},
							]);
						}
					}
				});
				// this.fys = times;
				let dqt = this.$z.timefn.gettime(0, new Date(), `hh:MM`);
				let dqtimes = times.findIndex((e) => {
					let h = dqt.split(":")[0];
					let M = dqt.split(":")[1];
					let h1 = e[3].t1.split(":")[0];
					let M1 = e[3].t1.split(":")[1];
					let h2 = e[3].t2.split(":")[0];
					let M2 = e[3].t2.split(":")[1];
					// 转数字
					h = Number(h);
					M = Number(M);
					h1 = Number(h1);
					M1 = Number(M1);
					h2 = Number(h2);
					M2 = Number(M2);
					return (
						(h1 < h && h < h2) || (h1 == h && M1 <= M) || (h2 == h && M2 >= M)
					);
				});
				if (dqtimes == "-1") {
					return "0";
				}
				return times[dqtimes][3];
			},
		},
		computed: {
			swiperlist() {
				let pic = this.CdzstationpicSearch.pic || ""
				pic = pic.split(";").filter(e => {
					return e != ""
				})
				// console.log(pic, this.CdzstationpicSearch, "picpic");
				if (pic.length == 0) {
					pic = [src]
				}
				return pic
			},
			fileList() {
				let yyzzpic = this.CdzfwfInfoSearch.yyzzpic || ""
				yyzzpic = yyzzpic.split(";").filter(e => {
					return e != ""
				}).map(e => {
					return {
						url: e
					}
				})
				return yyzzpic
			},
			par1() {
				return this.data.par1.split(",").filter((e) => {
					return e != "";
				});
			},
			jl() {
				//POINT(120.12647930852054 30.349640249011436)转换为[120.12647930852054,30.349640249011436]
				try {
					let mpt = this.data.mpt || "";

					mpt = mpt.match(/\d+\.\d+/g);
					let wz = this.$store.state.config.wz;
					return this.$z.getDistances(wz.lat, wz.lng, mpt[1], mpt[0]);
				} catch {
					return "0m";
				}
			},
			SiteOftenactive() {
				return this.SiteOften.find((e) => {
					return e.pcs == this.query.id;
				});
			},
		},
		onLoad(query) {
			this.query = query;
			// this.init();
		},
		onShow() {
			this.init()
		},
		methods: {
			previewImg() {
				this.showBusinessLicense = false
				uni.previewImage({
					urls: [this.businessLicenseImg],
					current: this.businessLicenseImg
				})
			},
			gostationggteltd(type) {
				// if (
				// 	type == "carzlsum" &&
				// 	this.data.carzlsum - this.data.carzlsumcd == 0
				// ) {
				// 	uni.$u.toast(this.$z.$t("暂无空闲充电桩"));
				// 	return;
				// }
				// if (
				// 	type == "carjlsum" &&
				// 	this.data.carjlsum - this.data.carjlsumcd == 0
				// ) {
				// 	uni.$u.toast(this.$z.$t("暂无空闲充电桩"));
				// 	return;
				// }
				uni.navigateTo({
					url: `/pages/StationCar/Stationgteltd/Stationgteltd?id=${this.query.id}&type=${type}`,
				});
			},
			ParkFeetap() {
				this.$refs.zmodal.init({
					content: this.$z.$t("停车费由运营人员维护，可能存在未及时更新的情况。请以真实情况为准。"),
				});
			},
			async init() {
				let CdzfwfInfoSearch = await this.$z.request("/CdzfwfInfoSearch", {
					stationid: this.query.id
				});
				CdzfwfInfoSearch = CdzfwfInfoSearch.length == 1 ? CdzfwfInfoSearch[0] : {};
				this.CdzfwfInfoSearch = CdzfwfInfoSearch;
				let CdzstationpicSearch = await this.$z.request("/CdzstationpicSearch", {
					stationid: this.query.id
				});
				// CdzstationpicSearch = CdzstationpicSearch.length == 1 ? CdzstationpicSearch[0] : {};
				this.CdzstationpicSearch = CdzstationpicSearch;

				let StationCar = await this.$z.request("/StationCar", this.query);
				await this.getSiteOften();
				this.data = StationCar[0];

				const StationType = [{
						label: this.$z.$t("居民区"),
						prop: "1"
					},
					{
						label: this.$z.$t("公共机构"),
						prop: "2"
					},
					{
						label: this.$z.$t("企事业单位"),
						prop: "3"
					},
					{
						label: this.$z.$t("写字楼"),
						prop: "4"
					},
					{
						label: this.$z.$t("工业园区"),
						prop: "5"
					},
					{
						label: this.$z.$t("交通枢纽"),
						prop: "6"
					},
					{
						label: this.$z.$t("大型文体设施"),
						prop: "7"
					},
					{
						label: this.$z.$t("城市绿地"),
						prop: "8"
					},
					{
						label: this.$z.$t("大型建筑配建停车场"),
						prop: "9"
					},
					{
						label: this.$z.$t("路边停车位"),
						prop: "10"
					},
					{
						label: this.$z.$t("城际高速服务区"),
						prop: "11"
					},
					{
						label: this.$z.$t("地上停车场"),
						prop: "12"
					},
					{
						label: this.$z.$t("地下停车场"),
						prop: "13"
					},
					{
						label: this.$z.$t("其他"),
						prop: "255"
					},
				]
				let dqStationType = StationType.find(e => {
					return e.prop == this.data.StationType
				})
				this.data.StationTypexs = dqStationType ? dqStationType.label : ''
			},
			async getSiteOften() {
				let SiteOften = await this.$z.request("/SiteOften");
				this.SiteOften = SiteOften;
			},
			async SiteOftenfn() {
				let url = this.SiteOftenactive ? "/SiteOftendel" : "/SiteOftenadd";
				await this.$z.request(url, {
					pcs: this.query.id,
				});
				await this.getSiteOften();
			},
			Stationxq() {
				uni.navigateTo({
					url: `/pages/StationCar/dfxq/dfxq?id=${this.query.id}`,
				});
			},
			dh() {
				this.$z.openLocation(this.data.mpt);
			},
			sys() {
				this.$z.sys();
			},
			showimg(url) {
				this.showBusinessLicense = true
				this.businessLicenseImg = url || ''

				// url="https://sponsors.vuejs.org/images/ant_design_vue.png"
				// uni.previewImage({
				// 	urls: [
				// 		url
				// 	]
				// })

			},
			closeImg() {
				this.showBusinessLicense = false
				this.businessLicenseImg = ''
			}
		},
	};
</script>

<style lang="scss">
	page {
		background: #f4f7f8;
	}

	.card {
		background: #fff;
		margin: 16rpx 32rpx;
		border-radius: 20rpx;
		padding: 30rpx 20rpx;

		.dfjebox {
			padding-top: 20rpx;
			font-size: 24rpx;
			padding-left: 56rpx;
			// height: 30rpx;
			color: $uni-text-color-grey;

			.xq {
				color: $uni-color-primary;
			}
		}

		.ParkFee {
			// padding: 20rpx 0;
			padding-left: 56rpx;
			padding-top: 20rpx;
			font-size: 28rpx;
			color: $uni-text-color-grey;
		}

		.itemtitle {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			// height: 72rpx;

			.iconfont {
				font-size: 26rpx;
				border-radius: 8rpx;
				color: #14bbb4;
				width: 36rpx;
				height: 36rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #e2eeea;
				margin-right: 20rpx;
			}
		}

		.tds {
			padding-top: 32rpx;

			.item {
				width: 0;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				padding: 0 20rpx;

				.zhi {
					min-width: 48rpx;
					height: 48rpx;
					font-size: 32rpx;
					color: #fff;
					background: linear-gradient(#447ae2, #bec4ee);
					border-radius: 8rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0 8rpx;
					flex-shrink: 0;
					flex-grow: 0;
				}

				.jiao {
					background: linear-gradient(#6cca8d, #bcedd6);
				}

				.text {
					padding-left: 12rpx;
					// flex: 1;

					.text1 {

						height: 48rpx;
						display: flex;
						align-items: center;
						font-size: 32rpx;
						color: $uni-text-color-grey;
						font-weight: bold;
						white-space: nowrap;

						.zhixian {
							color: #4078e2;
						}

						.jiaoxian {
							color: #5eb867;
						}
					}

					.text2 {
						line-height: 40rpx;
						font-size: 24rpx;
						color: $uni-text-color-grey;
					}
				}
			}
		}

		.title {
			.text {
				width: 0;
				flex: 1;

				.pcs {
					font-size: 40rpx;
					font-weight: bold;
					line-height: 64rpx;
				}

				.Address {
					font-size: 28rpx;
					line-height: 52rpx;
				}
			}

			.jl {
				.jltext {
					font-size: 24rpx;
					line-height: 40rpx;
				}

				.scicon {
					width: 60rpx;
					height: 60rpx;
					font-size: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: $uni-text-color-grey;

					&.active {
						color: $uni-color-warning;
					}
				}
			}
		}
	}

	.dfje {
		color: $uni-color-primary;
		padding-right: 10rpx;
	}

	.warm-reminder-title {
		text-align: center;
		margin-bottom: 40rpx;
	}

	.warm-reminder-ctn {
		line-height: 1.5;
		margin-bottom: 40rpx;
	}

	.business-license-close {
		margin-top: 40rpx;
		overflow: hidden;

		button {
			float: right;
			width: 120rpx;
		}
	}
</style>